<template>
    <div class="box-max">
        <div class="box" v-loading="loading" element-loading-text="发布视频中...">
            <div>
                <el-upload class="upload-demo" drag multiple :limit="1" ref="videoRef" :auto-upload="false"
                    accept="video/mp4, video/quicktime" :on-change="handleChange">
                    <el-icon class="el-icon--upload"><upload-filled /></el-icon>
                    <div class="el-upload__text">
                        拖拽视频到框内 或 <em>选择视频上传</em>
                    </div>
                    <template #tip>
                        <div class="el-upload__tip">
                            请注意视频上传格式
                        </div>
                    </template>
                </el-upload>
            </div>
            <div class="box-title">
                <el-input v-model="videoTitle" placeholder="请输入视频标题">
                </el-input>
            </div>
            <div class="box-category">
                <el-select v-model="videoIds" multiple placeholder="请选择视频分类">
                    <el-option v-for="item in options" :key="item.categoryId" :label="item.categoryName"
                        :value="item.categoryId">
                    </el-option>
                </el-select>
            </div>
            <div class="box-btn">
                <el-button class="btn" type="primary" @click="handleSubmit">
                    提交
                </el-button>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { getCategoryList, publishVideo } from '@/apis/api/list';
import { UploadFilled } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'

const videoTitle = ref('')
const videoRef = ref();
const video = ref();
const videoIds = ref([])
const options = ref([])
const loading = ref(false)
onMounted(() => {
    getCategoryList().then(res => {
        options.value = res.data
    })
})

const handleChange = (e) => {
    video.value = e.raw;//上传的文件
}
const handleSubmit = () => {
    if (!video.value) {
        ElMessage({
            duration: 3000,
            message: "请上传视频",
            type: 'error',
        })
        return
    } else if (videoTitle.value === '') {
        ElMessage({
            duration: 3000,
            message: "标题不能为空",
            type: 'error',
        })
        return
    } else if (videoIds.value.length === 0) {
        ElMessage({
            duration: 3000,
            message: "请选择分类",
            type: 'error',
        })
        return
    }
    const formData = new FormData();
    formData.append('video', video.value);
    formData.append('title', videoTitle.value);
    for (const id of videoIds.value) {
        formData.append('ids', id);
    }
    loading.value = true;
    publishVideo(formData).then(res => {
        if (res.code === 0) {
            ElMessage({
                duration: 3000,
                message: res.msg,
                type: 'success',
            })
            // 清除记录
            videoRef.value.clearFiles()
            videoTitle.value = ''
            videoIds.value = []
            
        } else {
            ElMessage({
                duration: 3000,
                message: res.msg,
                type: 'error',
            })
        }
        loading.value = false;
    })

}

</script>

<style scoped>
.box-max {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    padding-top: 5%;
}

.box {
    width: 60%;
}

.box-title {
    margin-top: 1.6rem;
}

.box-category {
    margin-top: 1rem;
}

.box-btn {
    margin-top: 1rem;
    display: flex;
    justify-content: center;
}

.btn {
    width: 40%;
    background-color: #626aef;
}
</style>